import { useState, useEffect } from 'react';
import { connect } from 'dva';
import back2 from '../../image/2-2-1.png';
import '../index.css';
import { Table, Button, Tag, Space } from 'antd';
import { Link } from 'umi';

// import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function EmployeeList({ employee, dispatch, notFirst }) {
  //function EmployeeList({ employee, dispatch }) {
  // componentDidMount
  console.log('employeeindexconsole-notFirst', notFirst);

  // if (!notFirst) {
  //   //会更改数据
  //   useEffect(() => {
  //     console.log('监控content更新1');
  //     dispatch({
  //       type: 'employee/getAll',
  //     });
  //   }, []);
  // }

  //会更改数据
  // useEffect(() => {
  //   console.log('监控content更新1');
  //   dispatch({
  //     type: 'employee/getAll',
  //     //type: 'employee/update',
  //     employee: employee,
  //   });
  // }, []);

  console.log('employeeindexconsole', employee);

  // //拿到当前值，给相应的方法，初始化相应的值。
  const [content, setContent] = useState('');
  const [counter, setCounter] = useState(0);

  // //存取props
  // const { value } = props;

  useEffect(() => {
    console.log('监控content更新2');
  }, [content]);

  //数据方式
  // "key": "2",
  // "firstName": "Jim",
  // "lastName": "Green",
  // "age": 42,
  // "address": "London No. 1 Lake Park",
  // "tags": ["loser"],

  const { Column, ColumnGroup } = Table;

  const data = [
    {
      key: '1',
      firstName: 'John',
      lastName: 'Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      firstName: 'Jim',
      lastName: 'Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      firstName: 'Joe',
      lastName: 'Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];

  // function deleteData(props) {
  //   console.log(props);
  //   const { id: targetId } = props.key;
  //   data.filter((e) => e.id !== targetId);
  // }

  return (
    <div className="back">
      {/* <h1>Employee List Page</h1>
      <table>
        <tbody>
          {employee.map((e) => (
            <tr key={e.id}>
              <td>{e.name}</td>
              <td>{e.firstName} </td>
              <td>{e.lastName} </td>
              <td>{e.age} </td>
              <td>{e.address} </td>
              <td>{e.tags} </td>
              <td>
                <button
                  onClick={() =>
                    dispatch({
                      type: 'employee/deleteEmployee',
                      payload: {
                        id: e.id,
                      },
                    })
                  }
                >
                  删除
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <img className="backImg" src={back2} /> */}
      <Button
        style={{ float: 'right', margin: '10px 0px' }}
        onClick={() => {
          dispatch({
            type: 'employee/getAll',
            //type: 'employee/update',
            employee: employee,
          });
        }}
      >
        Commit
      </Button>
      <Table dataSource={employee}>
        <ColumnGroup title="Name">
          <Column title="First Name" dataIndex="firstName" key="firstName" />
          <Column title="Last Name" dataIndex="lastName" key="lastName" />
        </ColumnGroup>
        <Column title="Age" dataIndex="age" key="age" />
        <Column title="Address" dataIndex="address" key="address" />
        <Column
          title="Tags"
          dataIndex="tags"
          key="tags"
          // render={(tags) => (
          //   <>
          //     {tags.map((tag) => (
          //       <Tag color="blue" key={tag}>
          //         {tag}
          //       </Tag>
          //     ))}
          //   </>
          // )}
        />
        <Column
          title="Action"
          key="action"
          render={(text, record) => (
            <Space size="middle">
              <Link
                to={() => {
                  // dispatch({
                  //   type: 'employee/getId',
                  //   payload: {
                  //     key: record.key,
                  //   },
                  // });
                  return '/list?key=' + record.key;
                  //return '/list/' + record.key;
                }}
              >
                编辑【{record.lastName}】
              </Link>
              |
              <a
                onClick={() => {
                  //同步删除data.json中的数据
                  dispatch({
                    type: 'employee/postAll',
                    payload: {
                      employee: employee.filter((e) => e.key !== record.key),
                    },
                  });

                  //删除缓存
                  dispatch({
                    type: 'employee/deleteEmployee',
                    payload: {
                      key: record.key,
                    },
                  });
                }}
              >
                删除
              </a>
            </Space>
          )}
        />
      </Table>
      {/* <img className="backImg" src={back2} /> */}
    </div>

    //antdesign
    // <div className="back">
    //   <h1>Employee List Page</h1>
    //   <Table columns={columns} dataSource={data} />
    //   <img className="backImg" src={back2} />
    // </div>

    //antdesign2
    // <div className="back">
    //   <Table dataSource={data}>
    //     <ColumnGroup title="Name">
    //       <Column title="First Name" dataIndex="firstName" key="firstName" />
    //       <Column title="Last Name" dataIndex="lastName" key="lastName" />
    //     </ColumnGroup>
    //     <Column title="Age" dataIndex="age" key="age" />
    //     <Column title="Address" dataIndex="address" key="address" />
    //     <Column
    //       title="Tags"
    //       dataIndex="tags"
    //       key="tags"
    //       render={(tags) => (
    //         <>
    //           {tags.map((tag) => (
    //             <Tag color="blue" key={tag}>
    //               {tag}
    //             </Tag>
    //           ))}
    //         </>
    //       )}
    //     />
    //     <Column
    //       title="Action"
    //       key="action"
    //       render={(text, record) => (
    //         <Space size="middle">
    //           <a>Invite {record.lastName}</a>
    //           <a
    //             onClick={(e) => {
    //               deleteData(e.target.value);
    //             }}
    //           >
    //             Delete
    //           </a>
    //         </Space>
    //       )}
    //     />
    //   </Table>
    //   <img className="backImg" src={back2} />
    // </div>
  );
}

export default connect(({ employee }) => ({ employee }))(EmployeeList);
